<template>
        <div class="wrap_item">
          <img :src="item.coverPath" class="wrap_img" @click="toxianshimianfei">
          <div class="wrap_img_text">
            <!-- <div class="wrap_icon"> -->
              <img src="../../../assets/icons/play_icon.png" class="wrap_icon_img">
            <!-- </div> -->
            {{ playCount }}
          </div>
          <div class="text-container">
            <p class="wrap_text ellipsis-text">{{ item.title }}</p>
          </div>
        </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { onMounted } from 'vue';
import { computed } from 'vue';
import { useRouter, useRoute } from "vue-router";
const $router = useRouter();

const props = defineProps<{
item:any
}>()
// onMounted(()=>{
//   console.log(props.item);
  
// })


const formatNumber = (number:number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(2) + ' 亿';
  } else if (number >= 10000) {
    return (number / 10000).toFixed(2) + ' 万';
  } else {
    return number.toString();
  }
}
const playCount = computed(()=>{
  let playCount = formatNumber(props.item.playCount)
  return playCount
})

// const toxianshimianfei = () => {
//   window.location.href="https://m.ximalaya.com/album/"+props.item.id
// }

const toxianshimianfei = () => {
  $router.push({
    name: "Course",
    params: {
      albumId: props.item.id,
    }
  });
}
</script>

<style scoped lang="less">




.wrap_item{
width: 103px;
height: 173px;
}
.wrap_img{
position: absolute;
width: 103px;
height: 103px;
border-radius: 6px;
}
.wrap_img_text{
position: relative;
top: 80px;
left: 10px;
width: 103px;
height: 28px;
font-size: 12px;
line-height: 20px;
color: #fff;
}
.wrap_text{
width: 103px;
height: 53px;
text-align: center;
font-size: 13px;
color: #333;
margin-top: 80px;
}
.wrap_icon_img{
  float: left;
  width: 15px;
  height: 15px;
  position: relative;
  top: 2px;
  left: -6px;
}
.text-container p{
width: 100px; /* 调整容器宽度 */
height: 26px;
overflow: hidden;
}
.ellipsis-text {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
</style>